<template>
  <div class="content-box">
    <div class="box-code">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
        border-card
      >
        <el-tab-pane label="文档" name="first" class="h-full">
          <MarkdownContainer
            :docText="rawReadmeContent"
            style="height: calc(100vh - 39px)"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="box-cesium">
      <div class="cesium-header">
        <el-button type="primary" size="small" @click="handleBackPage()"
          >返回</el-button
        >
        <div class="header-title">{{ options.title }}</div>
      </div>
      <div id="cesium-container">
        <Gui
          @staBtn="staBtn"
          @cloBtn="cloBtn"
          @sliChange="sliChange"
          :controlDatas="controlDatas"
          :btnArray="btnArray"
          :title="title"
        ></Gui>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import MarkdownContainer from "@/components/MarkdownContainer/index.vue";
import rawReadmeDoc from "./README.md?raw"; // 文档
import rawData from "./data"; // 配置的数据
import { useRouter } from "vue-router";
import Gui from "@/components/Gui/index.vue";
import LitmitHeight from "@/util/analysisLimitHeight.js";

const router = useRouter();

const activeName = ref("first");
const rawReadmeContent = ref(rawReadmeDoc);
const options = ref(rawData);
const handleClick = (tab, event) => {
  console.log(tab, event);
};
const handleBackPage = (path) => {
  if (path) {
    router.push(path);
  } else {
    router.back();
  }
};

/* Cesium代码 */
let viewer = null;
const title = "控高分析";
let btnArray = ref(["开启", "关闭"]);
let controlDatas = reactive([
  {
    label: "超出限高",
    name: "overHeight",
    type: "color",
    value: "#f50505",
  },
  {
    label: "基准面高度",
    name: "basicHeight",
    type: "slider",
    value: 50,
    step: 1,
    min: 0,
    max: 500,
  },
]);
let anaTool = null;
const initCesium = () => {
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjY5M2UwNi1kODhmLTQzZTItYjc4Ni0yMzlmNTBlYmIxYjgiLCJpZCI6MTU3NTE3LCJpYXQiOjE2OTQ1MDMyOTl9.PSElCoyLF_ecNszBWrrOmB9JH7yPxrSLo-Tx4DIm1LU";
  const options = {
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
    selectionIndicator: false,
    infoBox: false,
    scene3DOnly: true,
    contextOptions: {
      webgl: {
        alpha: true,
        depth: true,
        stencil: true,
        antialias: true,
        premultipliedAlpha: true,
        preserveDrawingBuffer: true,
        failIfMajorPerformanceCaveat: true,
      },
      allowTextureFilterAnisotropic: true,
      requestWebgl1: true,
    },
  };

  viewer = new Cesium.Viewer("cesium-container", options);
  //视角跳转
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(
      113.624802,
      34.743841,
      1000000.0
    ),
  });
  viewer.scene.globe.depthTestAgainstTerrain = true;
};

onMounted(() => {
  initCesium();
  addWorldTerrainAsync();
  anaTool = new LitmitHeight(viewer);
});

//加载地形
async function addWorldTerrainAsync() {
  try {
    let terrainProvider = await Cesium.createWorldTerrainAsync();
    viewer.terrainProvider = terrainProvider;
  } catch (error) {
    console.log(`this is a ${error}`);
  }
}

const startLimitHeight = async () => {
  ElMessage({
    type: "success",
    message: "点击加点，右击结束！",
    duration: 3000,
    offset: 90,
  });

  clearResizeHeightTool();
  let res = await anaTool.startAnalyze();
  console.log(res.maxHeight, "maxHeight");

  controlDatas[1].max = res.maxHeight;
  controlDatas[1].value = res.maxHeight - res.minHeight;
};

//重置/关闭限高分析
const clearResizeHeightTool = () => {
  if (anaTool) {
    anaTool.clearLimitHeight();
  }
};

//更新高度
const updateLimit = (options) => {
  if (!options) return;
  anaTool.setLimitHeight(options.height, options.color);
};

const staBtn = () => {
  startLimitHeight();
};

const sliChange = (e) => {
  const { l, v } = e;
  switch (l) {
    case "basicHeight":
      anaTool.setLimitHeight(v, controlDatas[0].value);
      break;
    case "overHeight":
      anaTool.setLimitHeight(controlDatas[1].value, v);
      break;
  }
};

const cloBtn = () => {
  clearResizeHeightTool();
  controlDatas[0].value = "#f50505";
  controlDatas[1].value = 0;
};
//加载全省geojson
onUnmounted(() => {
  viewer.destroy();
});
</script>

<style scoped lang="scss">
.content-box {
  display: flex;
  width: 100vw;
  height: 100vh;
  .box-code {
    width: 500px;
    height: 100%;
  }
  .box-cesium {
    width: calc(100% - 500px);
    height: 100%;
    .cesium-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 39px;
      padding: 0 10px;
      .header-title {
        margin: auto;
      }
    }
    #cesium-container {
      position: relative;
      width: 100%;
      height: calc(100% - 39px);
    }
  }
}
</style>

<style scoped>
:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__content) {
  padding: 0 !important;
}

:deep(.el-tabs--border-card) {
  border: 0 !important;
}
</style>
